<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
      <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
      <text class="title">新房源</text>
    </view>
    <scroll-view class="scroll-view" scroll-y>
      <view class="search">
        <image src="http://xcxtp.njmswl.com/images/search.png" class="searchImg" />
        <input type="text" class="input" placeholder="请输入小区/商圈" />
      </view>
      <view class="screen">
        <view class="screenItem">
          <text class="screen-text">二手房</text>
          <text class="line"></text>
        </view>
        <view class="screenItem">
          <text class="screen-text">新房</text>
          <text class="line"></text>
        </view>
        <view class="screenItem">
          <text class="screen-text">租房</text>
          <text class="line"></text>
        </view>
      </view>
      <view class="content">
        <view class="contentItem">
          <image src="http://xcxtp.njmswl.com/images/test.png" class="contentItemImg" />
          <view class="description">
            <p class="desTitle">整租·天润城(第七街区)2室1厅</p>
            <p>
              <span class="houseTag" v-for="(item, index) in tag" :key="index">{{ item }}</span>
            </p>
            <p>
              <span class="allPrice">1800/月</span>
            </p>
            <p>
              <span class="houseLabel" v-for="(item, index) in label" :key="index">{{ item }}</span>
            </p>
          </view>
        </view>
      </view>
      <open-program></open-program>
    </scroll-view>
  </view>
</template>
<script>
import openProgram from '../components/openProgram.vue'
export default {
  components: {
    openProgram,
  },
  data() {
    return {
      menu: {},
      label: ['近地铁', '新上', '精装修'],
      tag: ['86.02㎡', '南', '浦口', '桥北'],
    }
  },
  created() {
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log(this.menu)
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
  },
}
</script>
<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
.navbar {
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;

  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 7rpx;
  }

  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.search {
  display: flex;
  align-items: center;
  width: 695rpx;
  height: 70rpx;
  background: #f3f5fa;
  border-radius: 35rpx;
  margin-top: 37rpx;
  margin-left: 27rpx;

  .searchImg {
    width: 28rpx;
    height: 28rpx;
    margin-left: 25rpx;
    margin-right: 8rpx;
  }

  .input {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
  }
}

.screen {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 43rpx;
  padding-bottom: 34rpx;

  .screenItem {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;

    .screen-text {
      font-family: PingFang SC;
      font-weight: 550;
      font-size: 26rpx;
      color: #000000;
    }

    .line {
      position: absolute;
      bottom: 0;
      width: 27rpx;
      height: 4rpx;
      background: #16c686;
      border-radius: 2rpx;
    }
  }
}

.market {
  width: 10rpx;
  height: 6rpx;
  margin-left: 6rpx;
}

.content {
  display: flex;
  width: 750rpx;
  height: auto;
  background-color: #f4f5fc;

  .contentItem {
    flex: 1;
    display: flex;
    align-items: center;
    width: 695rpx;
    height: 230rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin-left: 27rpx;
    margin-right: 27rpx;
    margin-top: 24rpx;

    .houseTag {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #020609;
      margin-right: 20rpx;
    }

    .houseLabel {
      width: auto;
      height: 31rpx;
      background: #f3f4fa;
      border-radius: 3rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #687a8c;
      padding: 6rpx 11rpx;
      margin-right: 9rpx;
    }

    .allPrice {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 30rpx;
      color: #e75841;
      margin-right: 14rpx;
    }

    .desTitle {
      width: 410rpx;
      font-family: PingFang SC;
      font-weight: 550;
      font-size: 30rpx;
      color: #000000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contentItemImg {
      width: 210rpx;
      height: 155rpx;
      background: #000000;
      border-radius: 5rpx;
      margin-left: 26rpx;
      margin-right: 21rpx;
    }
  }
}

.avgPrice {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #989b9e;
}
</style>
